<template>
  <div class="warp">

    <div class="cover-box" v-show="mask" @click="toggleMask">
      <div class="mask">
        <img :src="cover">
      </div>
      <p class="tt">{{tt}}</p>
      <p class="txt">{{author}}</p>
    </div>

    <div :class="chapterShow ? 'page-read-chapter-list show-panel' : 'page-read-chapter-list'" @click="chapterShowToggle();">
      <div class="content">
        <div class="top-bar">
          <p>{{tt}}</p>
          <p>目录</p>
        </div>
        <div class="directory-list">
          <ul>
            <li v-for="(item,index) in chapterList" :class="{'active' : activeReadIndex == index}" @click="setReadActive(index)">
              <span>{{item.title}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div :class="controller ? 'controller show-panel' : 'controller'">
      <span class="close" @click="controllerToggle()"></span>
      <div class="top-con">
        <div class="return" @click="back()">
          <span class="r-icon"></span>
          <span>返回</span>
        </div>
        <div class="tt">{{tt}}</div>
      </div>
      <div class="bottom-con">
        <div class="txtsize">
          <span class="btn" @click="fontSizeLess();">Aa-</span>
          <div class="progress-bar">
            <span class="content" :style="{width:fontBar*25+'%'}"></span>
          </div>
          <span class="btn" @click="fontSizeAdd();">Aa+</span>
        </div>
        <div class="square">
          <span :class="{active : readType == 'default'}" @click="readTypeChange('default')">默认</span>
          <span :class="{active : readType == 'black-theme'}" @click="readTypeChange('black-theme')">夜间</span>
          <span :class="{active : readType == 'eye-theme'}" @click="readTypeChange('eye-theme')">护眼</span>
        </div>
        <div class="bookswitch">
          <span @click="prevChapter();">上一章</span>
          <span class="directory" @click="chapterShowToggle();">目录</span>
          <span @click="nextChapter();">下一章</span>
        </div>
      </div>
    </div>




    <div :class="[readType]" @click="controllerToggle()">
    <!--   <div 
          :class="['readbook','booksize'+fontBar]" 
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="isload"
          infinite-scroll-distance="0"
          v-if="turnType == 1"
      >

          <div class="item-box" v-for="item in booklist" ref="booklistid">
            <h3>标题</h3>
            <p>内容</p>
            {{item.content}}
            {{item.content}}
          </div>

          <div class="loadmore-down">
            <span>加载中...</span>
          </div>
      </div> -->


      <div :class="['readbook-lr','booksize'+fontBar]" v-swipeleft="{fn:turningPage,state:'add'}" v-swiperight="{fn:turningPage,state:'less'}" v-if="turnType == 2">
        <div class="readbook-box" :class="{'js-anim' : animNone}" :style="{transform: 'translateX('+(-leftPage*screenWidth)+'px)'}" ref="leftPage">
          <div v-html="booklist" class="readbook">

          </div>
        </div>
      </div>

    </div>


    <p class="chapter">{{now_chap_num}}/{{total_chap_num}}章</p>
  </div>
</template>
<script>
  import { Loadmore } from 'mint-ui';
  import { Toast } from 'mint-ui';

    export default {
    	name: 'readbook',
    	components: {
        'mt-loadmore':Loadmore
	    },
    	data () {
      		return {
            novel_id:0,
            cover:'',
            author:'',
            controller:false,
            isload:true,
            booklist:'',
            readType:'default',
            fontBar:0,
            chapterShow:false,
            page:0,
            chapterList:[],
            tt:'',
            screenWidth: document.body.clientWidth,
            activeReadIndex:0, // 章节
            leftPage:0,  // 小说进度
            animNone:false,
            turnType:2,
            maxPage:6,
            winH:0,
            mask:false,
            now_chap_num:0,
            total_chap_num:0
	      	}
      },
      record_jd(){
        //小说ID 章节ID 页码

      },
      created(){

        if(localStorage.getItem('readType')){
          this.readType = localStorage.getItem('readType');
        }
        if(localStorage.getItem('fontSize')){
          var fontBar = localStorage.getItem('fontSize');
          this.fontBar =  fontBar>4?4:(fontBar<0?0:fontBar);
        }

        let height = document.body.clientHeight;
        this.winH = height;
        this.$axios.post(
            this.$store.state.url+"novel_info?device_sn="+this.$store.state.device,
            {device_sn:this.$store.state.device,id:this.$route.params.id,type:1}).then(res=>{
              console.log(res.data)
              //这里是所有章节列表,但不一定是从0开始的
              this.novel_id = res.data.data.novel_info.id;
              this.chapterList = res.data.data.chapter_info;
              this.tt = res.data.data.novel_info.title;
              this.cover = res.data.data.novel_info.cover;
              this.cover && (this.mask = true);
              this.author = res.data.data.novel_info.author;
              this.booklist = res.data.data.chapter_info[0].content;
              //更新最大采集回来的章节数
              //TODO:最好是修改成小说基本信息里的章节数
              // this.total_chap_num = res.data.data.novel_info.chapter_number;
              if(this.chapterList.length>0){
                var last_chap = this.chapterList[this.chapterList.length - 1];
                this.total_chap_num = last_chap.chap_num;
              }
              var now_chap = this.chapterList[this.activeReadIndex];
              this.now_chap_num = now_chap.chap_num;

              console.log("pageSize:"+this.booklist.length/height)
              // this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar*0.6))/this.winH)+1;
              this.calc_pageNum();
              // ++this.activeReadIndex;
              // this.loadMore(true);
              

              // 设置章节和页数
              // this.setDefault(1,2) // 第2章 第三页
              this.setDefault(0,0) // 默认通过检查判断上次读取位置
        });

      },
	    mounted(){
        this.screenWidth = this.screenWidth - this.$refs.leftPage.getBoundingClientRect().left;
	    },
	    methods:{
        read_progress(){
          var jd = {
            chapter:this.activeReadIndex,
            leftPage:this.leftPage
          };
          localStorage.setItem('novel_'+this.novel_id,JSON.stringify(jd));
          console.error("leftPage:"+this.leftPage+"\tmaxPage:"+this.maxPage);
        },
        setDefault(chapter = 0,page = 0){
          if(chapter==0 && page==0){
            var jd = localStorage.getItem('novel_'+this.novel_id);
            if(jd && jd!=''){
              jd = $.parseJSON(jd);
              this.activeReadIndex = jd.chapter;
              this.leftPage = jd.leftPage;
            }
          }else{
            this.activeReadIndex = chapter; // 章节
            this.leftPage = page;  // 小说进度
          }
        },
        toggleMask(){
          this.mask = !this.mask;
        },
          loadMore:function(bo) {
            if(this.isload&&!bo)return;
            this.isload = true;
            setTimeout(()=>{
              if(this.booklist.length == this.chapterList.length){
                return false;
              }
              this.booklist.push(this.chapterList[this.activeReadIndex])
              this.isload = false;
              if(!bo){
                ++this.activeReadIndex;
                var now_chap = this.chapterList[this.activeReadIndex];
                this.now_chap_num = now_chap.chap_num;
              }
            },300)
          },
	      	back(){
	        	this.$router.go('-1')
	      	},
          scrollTop(index){
            console.log(this.$refs.booklistid[index].offsetTop)
            var offsetTop = this.$refs.booklistid[index].offsetTop;
            window.scrollTo(0, offsetTop);

            // Toast({
            //     message: '移除成功',
            //     position: 'middle',
            //     duration: 1000
            // });
          },
          controllerToggle(){
            this.controller = !this.controller;
          },
          fontSizeAdd(){
            if(this.fontBar >= 4){
              this.fontBar = 4;
              localStorage.setItem('fontSize', this.fontBar)
              return false;
            }
            // this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar+1))/this.winH)+1;
            this.calc_pageNum();
            this.fontBar += 1;
            localStorage.setItem('fontSize', this.fontBar)
          },
          fontSizeLess(){
            if(this.fontBar <= 0){
              this.fontBar = 0;
              localStorage.setItem('fontSize', this.fontBar);
              return false;
            }
            // this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar+1))/this.winH)+1;
            this.calc_pageNum();
            this.fontBar -= 1;
            localStorage.setItem('fontSize', this.fontBar)
          },
          readTypeChange(val){
            this.readType = val;
            localStorage.setItem('readType', this.readType)
          },
          chapterShowToggle(){
            this.chapterShow = !this.chapterShow;
            this.controller = false;
          },
          nextChapter(){
            if(this.activeReadIndex < this.chapterList.length){ 
              ++this.activeReadIndex;
              var now_chap = this.chapterList[this.activeReadIndex];
              this.now_chap_num = now_chap.chap_num;

              if(this.turnType == 2){
                this.leftPage = 0;
                this.animNone = true;
                this.booklist = '';
                this.booklist = this.chapterList[this.activeReadIndex].content;
                // this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar*0.25))/this.winH)+1;
                this.calc_pageNum();
              }else{
                this.booklist = '';
                this.loadMore(true);
              }
              this.read_progress();
            }
          },
          prevChapter(){
            if(this.activeReadIndex > 0){

              --this.activeReadIndex;
              var now_chap = this.chapterList[this.activeReadIndex];
              this.now_chap_num = now_chap.chap_num;

              if(this.turnType == 2){
                this.leftPage = 0;
                this.animNone = true;
                this.booklist = '';
                this.booklist = this.chapterList[this.activeReadIndex].content;
                // this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar*0.25))/this.winH)+1;
                this.calc_pageNum();
              }else{
                this.booklist = '';
                this.loadMore(true);
              }
            }
            this.read_progress();
          },
          setReadActive(val){
              this.activeReadIndex = val;
              var now_chap = this.chapterList[this.activeReadIndex];
              this.now_chap_num = now_chap.chap_num;
              this.booklist = this.chapterList[this.activeReadIndex].content;
              // this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar*0.25))/this.winH)+1;
              this.calc_pageNum();
              // this.loadMore(true);
              this.read_progress();
          },
          calc_pageNum(){
            var $charWrap = $('<div style="opacity: 1; position: absolute; left: 0px; top: 0px;" class="readbook booksize'+this.fontBar+'"></div>');
            $('body').append($charWrap);
            $charWrap.html(this.booklist);
            var pageNum = $charWrap.height()/this.winH;
            pageNum = pageNum * (1 + 0.2 + 0.05);
            this.maxPage = Math.ceil(pageNum) + 1;
            console.error("pageNum:"+this.maxPage+"\t fontBar:"+this.fontBar);
            $charWrap.remove();
          },
          turningPage(s,e){
            console.log(this.activeReadIndex)
            console.log(this.chapterList.length)
            if(s.state == 'add' && this.activeReadIndex < this.chapterList.length && this.leftPage < this.maxPage){
              ++this.leftPage;
            }else if(s.state == 'less' && this.activeReadIndex >= 0 && this.leftPage > 0){
              --this.leftPage;
            }


            if(this.leftPage >= this.maxPage && s.state == "add" && this.activeReadIndex < this.chapterList.length-1){
              ++this.activeReadIndex;
              setTimeout(()=>{
                var now_chap = this.chapterList[this.activeReadIndex];
                this.now_chap_num = now_chap.chap_num;

                this.leftPage = 0;
                this.animNone = true;
                this.booklist = '';
                this.booklist = this.chapterList[this.activeReadIndex].content;
                this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar*0.25))/this.winH)+1;
                this.calc_pageNum();
              },500)
              return false;
            }

            if(this.leftPage <= 0 && s.state == "less" && this.activeReadIndex > 0){
              --this.activeReadIndex;
              setTimeout(()=>{
                var now_chap = this.chapterList[this.activeReadIndex];
                this.now_chap_num = now_chap.chap_num;

                this.leftPage = 0;
                this.animNone = true;
                this.booklist = '';
                this.booklist = this.chapterList[this.activeReadIndex].content;
                // this.maxPage = Math.ceil((this.booklist.length+this.booklist.length*(this.fontBar*0.25))/this.winH)+1;
                this.calc_pageNum();
              },500)
              return false;
            }

            this.animNone = false;
            this.read_progress();
          }
	    }
  	}
</script>
<style lang="scss">
.cover-box{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background:#fff url(../assets/images/mask-bg.jpg) no-repeat top center/100% 100%;
  z-index:1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  .mask{
    width:400px;
    margin:30px auto;
  }
  .tt{
    font-size:42px;
    margin:30px 0;
  }
  .txt{
    font-size:30px;
    color:#999999;
    margin:30px 0;
  }
}
.js-anim{
  transition:none!important;
}
.default,.black-theme,.eye-theme{
  min-height:100vh;
}
  .page-read-chapter-list{
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 200;
    overflow: hidden;
    -webkit-transition: all .2s ease;
    transform: translateX(-100%);
    &.show-panel{
      transform: translateX(0);
      visibility: visible;
    }
    .content{
        width: 590px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        .top-bar{
          position: absolute;
          width: 7.86667rem;
          top: 0;
          height: 2.13333rem;
          background: #fff;
          border-bottom: 1px solid #f2f2f2;
          padding-left: .53333rem;
          z-index: 99;
          p:nth-child(1){
            font-size: .48rem;
            line-height: .48rem;
            padding: .4rem 0 .53333rem;
            color:#333;
          }
          p:nth-child(2){
            font-size: .45333rem;
            height: .45333rem;
            line-height: .45333rem;
            color: #999;
          }
        }
        .directory-list{
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          padding-top: 2.13333rem;
          overflow-y: auto;
          li{
            position: relative;
            height: 1.33333rem;
            line-height: 1.33333rem;
            padding-left: .53333rem;
            padding-right: .93333rem;
            border-bottom: 2px solid #f2f2f2;
            color: #999;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            a{
              color:#999;
            }
            &.active{
              a{
                color:#b93321;
              }
            }
          }
        }
    }
  }



    .default{
      background-color:#eee6dd;
    }
    .black-theme{
      background-color: #0c0c0c;
      color: #fff;
      h3{
        color:#888;
      }
      p{
        color:#666;
      }
    }
    .eye-theme{
      background-color: #b8cd8d;
      color: #0c2e10;
      h3{
        color:#0c2e10;
      }
      p{
        color:rgba(12,46,16,.8);
      }
    }


    .readbook-lr{
      position: relative;
      height:90vh;
      top:5vh;
      overflow:hidden;
      padding:0 40px;
      text-align: justify;
      transition: all .3s ease;
      .readbook-box{
        columns: calc(100vw - 80px) 1;
        column-gap:40px;
        column-count:6;
        height:100%;
        overflow: visible;
        transition: all .5s ease;
      }
    }

  .readbook{
    padding:50px 0;
    text-align: justify;
    .item-box:first-child{
      margin-top:0;
    }
    .item-box{
      margin-top:120px;
      padding-top:20px;
    }
    h3{
      color:#333;
      font-weight:normal;
      margin-bottom:30px;
    }
    p{
      line-height: 2;
      text-indent: 80px;
      margin-bottom:20px;
      color: #5c5d58;
    }
    .loadmore-down{
      line-height:80px;
      text-align:center;
      font-size:32px;
      margin-top:40px;
    }
  }

  .booksize0{
    font-size:28px;
    h3{
      font-size:40px;
    }
    p{
      font-size:28px;
    }
  }
  .booksize1{
    font-size:33px;
    h3{
      font-size:45px;
    }
    p{
      font-size:33px;
    }
  }
  .booksize2{
    font-size:38px;
    h3{
      font-size:50px;
    }
    p{
      font-size:38px;
    }
  }
  .booksize3{
    font-size:43px;
    h3{
      font-size:55px;
    }
    p{
      font-size:43px;
    }
  }
  .booksize4{
    font-size:48px;
    h3{
      font-size:60px;
    }
    p{
      font-size:48px;
    }
  }
  .chapter{
    position:fixed;
    bottom:10px;
    left:0;
    width:100%;
    text-align: center;
    font-size:32px;
  }
  .controller{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:100;
    visibility: hidden;
    .close{
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    &.show-panel{
      visibility: visible;
      .top-con,.bottom-con{
        transform:translate(0,0);
      }
    }
    .top-con{
      position: absolute;
      top:0;
      left:0;
      width:100%;
      background-color: rgba(50,51,52,.9);
      display: flex;
      justify-content:center;
      align-items: center;
      padding:0 30px;
      height:90px;
      transition: all .3s linear;
      transform:translate(0,-100%);
      .return{
        font-size:24px;
        color:#fff;
        display: flex;
        align-items: center;
        position:absolute;
        top:0;
        left:30px;
        height:100%;
        line-height:90px;
        .r-icon{
          display: inline-block;
          width:30px;
          height:30px;
          margin-right:10px;
          vertical-align: middle;
          background:url(../assets/images/icon/r-icon3.png) no-repeat 0 0/100% auto;
        }
      }
      .tt{
        font-size:28px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
        width:500px;
        color:#fff;
        text-align: center;
      }
    }

    .bottom-con{
      position: absolute;
      bottom:0;
      left:0;
      width:100%;
      background-color: rgba(50,51,52,.9);
      padding:50px 30px;
      color:#fff;
      transition: all .3s linear;
      transform:translate(0,100%);
      .txtsize{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 10px;
        span{
          font-size:40px;
        }
        .progress-bar{
          width:450px;
          height:5px;
          background-color:#b2b2b2;
          span{
            display: block;
            background-color:#b93221;
            width:20%;
            height:100%;
          }
        }
      }
      .square{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 10px;
        margin-top:40px;
        span{
            width:23%;
            color: #fff;
            border: 2px solid #535353;
            border-radius: 10px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size:26px;
            &.active{
              color: #b93221;
              border: 2px solid #b93221;
            }
        }
      }
      .bookswitch{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 10px;
        margin-top:40px;
        span{
          font-size:26px;
        }
        .directory{
          color: #a8a8a8;
          font-size:24px;
        }
      }
    }
  }
</style>
